<template>
  <div>
    <h1>部门管理</h1><hr>

      <!-- 二维码 -->
      <div class="code">
        <img :src="img" />
      </div>

  </div>
</template>

<script>
import AraleQRCode from "arale-qrcode";
export default {
  name: "DeptView",
  data(){
    return{
      img: "",

    }
  },methods:{
//生成二维码方法
    makeCode() {
      const result = new AraleQRCode({
        render: "svg",      // 定义生成的类型 'svg' or 'table dom’
        text: "http://172.20.10.5:8080/cart", // 二维码的链接
        size: 150,      //二维码大小
      });

      // 将svg xml文档转换成字符串
      const svgXml = new XMLSerializer().serializeToString(result);

      // 将svg字符串转成base64格式，通过 window.btoa方法创建一个 base-64 编码的字符串，进行二次编码解码(encodeURIComponent 字符串进行编码和解码，unescape 进行解码)。
      const src =
          "data:image/svg+xml;base64," +
          window.btoa(unescape(encodeURIComponent(svgXml)));

      // 本地存储图片
      localStorage.setItem("image", src);
      this.getImg();
    },

    // 获取存储的图片给到页面
    getImg() {
      this.img = localStorage.getItem("image");
      console.log("$$$$", this.img);
      localStorage.removeItem("image");
    },

  },created() {
    this.makeCode()
  }
}
</script>

<style scoped>

</style>